<template>
    <div class="box">
        <!-- 顶部 -->
        <div class="top">
            <van-nav-bar title="购物车" class="title" />
        </div>
        <!-- 商品信息 -->
        <div class="main">
            <div class="conter">
                <div class="checkbox">
                    <van-checkbox-group v-model="ids" ref="checkboxGroup" @change="onChange">
                        <van-checkbox class="check" v-for="item in list " :key="item.id" :name="item"
                            :id="item.id"></van-checkbox>
                    </van-checkbox-group>
                </div>
                <div class="cardbox">
                    <van-swipe-cell v-for="item in list" :id="item.id" :key="item.id" :name="item.id">
                        <van-card >
                            <template #title>
                                <span>{{ item.goods_name }}</span>
                            </template>
                            <template #thumb>
                                <van-image width="100" height="100" :src="item.list_pic_url" />
                            </template>
                            <template #price>
                                ¥<span class="price">{{ item.market_price }}</span>
                            </template>
                            <template #num>
                                X<span>{{ item.number }}</span>
                            </template>
                        </van-card>
                        <template #right>
                            <van-button square text="删除" type="danger" class="deletebutton" v-for="item in list" :key="item.id"
                            name="item.id" @click="del(item.id)"/>
                        </template>
                    </van-swipe-cell>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer">
            <van-submit-bar :price="jiage * 100" button-text="提交订单" @submit="onSubmit" class="btn">
                <van-checkbox v-model="checked" @change="radioChange">全选</van-checkbox>
                <template #tip>
                    你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
                </template>
            </van-submit-bar>
        </div>
    </div>
</template>

<script>
import { CartList, CatDel } from '../../http/api'
import { Toast } from 'vant'
export default {
  data () {
    return {
      ids: [],
      // 单选
      checked: false,
      // 全选
      list: [],
      jiage: 0,
      arr: [],
      jiage: 0
    }
  },
  methods: {
    // 获取购物车数据
    async getCartList () {
      const res = await CartList()
      this.list = res.data.data.cartList
      console.log(this.list)
    },
    // 提交付款
    onSubmit () {
      if (this.ids.length > 0) {
        Toast('跳转支付~~~~')
        this.checked = false
      } else {
        Toast('选择支付的商品~~~~')
      }
    },
    // 修改地址
    onClickEditAddress () {

    },
    // 点击复选框时触发
    onChange (item) {
      this.ids = item
      if (item.length === this.list.length) {
        this.checked = true
      } else {
        this.checked = false
      }
      // console.log(item);
      let sum = 0
      item.forEach(e => {
        sum += e.retail_price
      })
      this.jiage = sum
    },
    radioChange (item) {
      this.checked = item
      if (item) {
        const arr = []
        this.list.forEach(item => {
          arr.push(item)
        })
        this.ids = arr
      } else {
        this.ids = []
      }
    },
    async del (val) {
      const res = await CatDel(val)
      console.log(res)
      if (res.status === 200) {
        Toast('删除成功')
        this.list = []
      }
    }
  },
  created () {
    this.getCartList()
  }
}
</script>

<style scoped>
.box {
    height: 100%;
}

.top {
    height: 7%;
    width: 100%;
    position: fixed;
    z-index: 999;
}

.main {
    height: 83%;
    overflow: auto;
    margin-top: 50px;
    margin-bottom: 30px;

}

.footer {
    height: 10%;
}

.van-submit-bar {
    bottom: 50px;
}

.price {
    margin-left: 2px;
    font-size: 18px;
    color: red;
}

.conter {
    display: flex;
}

.cardbox {
    width: 93%;

}

.checkbox {
    width: 7%;
    padding-left: 10px;
}

.check {
    height: 106px;
}

.van-card {
    margin-top: 0px;
}
.deletebutton{
    display: flex;
    flex-direction: column;
    height: 106px;
}
</style>
